import React, { useEffect } from "react";
import './index.less';
import { Outlet, useNavigate } from 'react-router-dom';
import { Layout, Button, Space, Table, Popconfirm } from 'antd';
import { connect } from "react-redux";
import { getPreviousAction, deletePreviousAction } from '@redux/actions';
import moment from "moment";

const { Header } = Layout;

const PreviousFonc = (props) => {

  const navigate = useNavigate();
  const { getPreviousAction, list, deletePreviousAction } = props;

  const columns = [
    {
      title: '发布时间',
      dataIndex: 'publishDate',
      key: 'publishDate',
      render: (text) => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '贡献用户',
      dataIndex: 'contriId',
      key: 'contriId',
      render: (arr) => <span>{arr ? arr.join(', ') : ''}</span>
    },
    {
      title: '获赞数',
      dataIndex: 'likeNum',
      key: 'likeNum'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Popconfirm
            placement="topRight"
            title='你确定要删除该条往期功能吗？'
            onConfirm={() => {confirmDelete(record.key)}}
            okText="确定"
            cancelText="取消"
          >
            <Button>删除</Button>
          </Popconfirm>
          <Button onClick={() => { navigate(`/message-board/previous-fonc/edit?content=${encodeURIComponent(record.content)}&contriId=${JSON.stringify(record.contriId)}&id=${record.key}`) }}>
            修改
          </Button>
        </Space>
      ),
    },
  ];

  const confirmDelete = (id) => {
    deletePreviousAction(id);
  };

  useEffect(() => {
    getPreviousAction();
  }, [getPreviousAction])

  return <div className="previous_fonc">
    <Layout>
      <Header>
        <Button onClick={() => {navigate('/message-board/previous-fonc/edit')}}>添加往期功能</Button>
      </Header>
    </Layout>
    <Table columns={columns} dataSource={list}
      pagination={{ defaultPageSize: 20, total: list.length }}
    />
    <Outlet />
  </div>
}

export default connect(
  state => ({
    list: state.previousReducer
  }),
  { getPreviousAction, deletePreviousAction }
)(PreviousFonc);